<template>
	<view>
		<view class="wrap">
			<view class="u-p-l-30 u-p-r-30 u-p-b-10 bg-white">
				<u-search v-model="key" :show-action="false" shape="square" clearabled @change="searchKeyword">
				</u-search>
			</view>
			<view class="u-tabs-box">
				<u-tabs-swiper 
					ref="tabs" 
					activeColor="#f29100" 
					:list="list" 
					:current="current" 
					@change="change"
					:is-scroll="false" 
				>
				</u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(cell, c) in orderList" :key="c">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
						<view class="grid-box" v-for="(res, index) in orderList[c]" :key="res.id">
							<navigator :url="res.terminal == 'AIO'?'/pages/my/order/fitviews/fitviews?id='+res.id:'/pages/my/order/views/views?id='+res.id" class="order">
							<!-- <navigator :url="'/pages/my/order/views/views?id='+res.id" class="order"> -->
								<view class="top">
									<view class="left">
										<u-tag text="自送" mode="light" type="warning" size="mini" v-if="res.terminal == 'AIO'"/>
										<u-icon name="order" :size="30" color="rgb(94,94,94)" v-else></u-icon>
										<view class="store">{{res.number}}</view>
									</view>
									<view class="right">{{ res.state }}</view>
								</view>
								<!-- 上门地址与联系人 -->
								<view class="u-p-t-20">
									<view class="address">
										<u-icon name="map-fill" size="32"></u-icon>
										<text class="u-font-32">【{{res.address.cityname}}】{{res.address.address}}</text>
									</view>
									<view class="u-p-t-8">
										<view class="u-flex u-font-24">
											<!-- <text class="label u-tips-color">联系人:</text>
											<text class="u-text-right">{{res.address.name}}({{res.address.mobile}})</text> -->
											<text class="u-text-right">{{res.address.name}}</text>
											<text class="u-p-l-30">{{res.address.mobile}}</text>
										</view>
									</view>
								</view>
								
								<view class="time">
									<view class="u-flex" v-if="res.brother">
										<text class="label u-flex-1 u-tips-color">接单小哥</text>
										<view class="u-flex u-text-right u-align-items" style="line-height: 1em;">
											<u-avatar src="" size="30" v-if="res.brother.name"></u-avatar>
											<text class="u-text-right u-p-l-10">{{res.brother.name || '未接单'}}</text>
										</view>
									</view>
									<view class="u-flex" v-if="res.doortime">
										<text class="label u-tips-color">预约上门时间</text>
										<text class="u-flex-1 u-text-right u-font">{{$u.timeFormat(res.doortime.replaceAll('-','/'), 'yyyy-mm-dd hh:MM:ss')}}</text>
									</view>
									<view class="u-flex" v-if="res.completiontime">
										<text class="label u-tips-color">完成时间</text>
										<text class="u-flex-1 u-text-right u-font">{{res.completiontime}}</text>
									</view>
								</view>
								
								<view class="bottom">
									<view class="more">
										<text class="u-font-24 u-tips-color">{{$u.timeFrom(new Date(res.createddatetime.replaceAll('-','/')), false)}}</text>
										
										<template v-if="res.terminal =='WX'">
											<u-button type="warning" style="margin-left:15rpx;color: red;" v-if="res.state == '已完成'" @click="commentsFormid(res.id)" size="mini" :plain="true">订单点评</u-button>
											<!-- <view @click.stop="viewComments(res.id)" class="u-font-24  u-m-l-15" style="color: #10beca;"  v-if="res.state == '已点评'">
												<u-icon name="eye"></u-icon>查看点评
											</view> -->
										</template>
									</view>
									<view class="total">
										<text v-if="res.estimated.length > 0">共{{res.estimated.length}}种回收品</text>
										
										<template v-if="res.state == '已完成' || res.state == '已点评'">
											<text class="u-p-l-15">合计:</text>
											<text class="total-price">
												<text>￥</text>
												<text class="decimal">{{ res.amount.toFixed(2) }}</text>
											</text>
										</template>
									</view>
								</view>
								
								<!-- <view class="navigation-box" v-if="res.terminal =='WX'">
									<view class="navigation">
										<view class="con">
											<u-button class="navbtn u-w-200">取消订单</u-button>
											<u-button type="primary" class="navbtn u-w-200 u-p-l-20" v-if="res.state == '已完成'" @click="commentsFormid(res.id)">订单点评</u-button>
										</view>
									</view>
								</view> -->
							</navigator>
						</view>
						<view class="u-p-t-20">
							<u-loadmore :status="loadStatus[c]"></u-loadmore>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 评论 -->
		<u-popup v-model="show" mode="center" :closeable="true">
			<view class="comment-box">
				<view class="hd">平台服务</view>
				<view class="u-flex">
					<text class="label">便捷性：</text>
					<u-rate v-model="commentsForm.convenience"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">操作性：</text>
					<u-rate v-model="commentsForm.operability"></u-rate>
				</view>
				<view class="hd">小哥服务</view>
				<view class="u-flex">
					<text class="label">穿着整齐：</text>
					<u-rate v-model="commentsForm.dresssharp"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">服务态度：</text>
					<u-rate v-model="commentsForm.serviceattitude"></u-rate>
				</view>
				<view class="u-flex">
					<text class="label">业务能力：</text>
					<u-rate v-model="commentsForm.businesscapability"></u-rate>
				</view>
				<view class="hd">点评</view>
				<u-input type="textarea" :clearable='false' :border="true" v-model="commentsForm.remarks" />
				<view class="u-m-t-20"></view>
				<u-button type="primary" v-if="btn"  @click="comments">提交</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				btn:true,
				commentsForm:{
					orderid: 0,
					convenience: 5,
					operability: 5,
					dresssharp: 5,
					serviceattitude: 5,
					businesscapability: 5,
					remarks: ""
				},
				show:false,
				orderList: [
					[],
					[],
					[],
					[]
				],
				list: [
					{
						name: '全部'
					},
					{
						name: '服务中',
					},
					{
						name: '点评',
					},
					{
						name: '已取消',
					},
				],
				state:[
					{value: 0, name: "已受理", count: 0},
					{value: 1, name: "待上门", count: 0},
					{value: 2, name: "待收款", count: 0},
					{value: 3, name: "已取消", count: 0},
					{value: 4, name: "已完成", count: 0},
					{value: 5, name: "已点评", count: 0},
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				loadStatus: ['loading', 'loading', 'loading', 'loading', 'loading', 'loading','loading'],
				PageIndex: 1,
				PageSize: 20,
				noMore: false,
				key: '',
				// 自定义下拉刷新
				triggered: false
			};
		},
		watch:{
			show(val){
				console.log(val)
				if(val == false){
					this.commentsForm  = {
						orderid: 0,
						convenience: 5,
						operability: 5,
						dresssharp: 5,
						serviceattitude: 5,
						businesscapability: 5,
						remarks: ""
					}
					this.btn = false
				}
				
			}
		},
		onLoad(opt) {
			if (opt.current) {
				this.change(parseInt(opt.current)).then(()=>{
					this.current = parseInt(opt.current)
				})
			}
		},
		onShow() {
			this.orderList[this.swiperCurrent] = []
			this.PageIndex = 1
			this.getOrderList(this.list[this.swiperCurrent].name, this.current)
		},
		computed: {
			...mapState({
				userdetail: state => state.userdetail,
				webSetting: state => state.webSetting
			}),
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val;
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val;
					else return val;
				};
			}
		},
		onPullDownRefresh() {
			this.orderList[this.swiperCurrent] = []
			this.PageIndex = 1
			this.getOrderList(this.list[this.swiperCurrent].name, this.swiperCurrent).then(() => {
				uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			})
		},
		methods: {
			// viewComments(id){
			// 	this.$u.get('/User/Order/CommentsDetails?id='+id).then((res)=>{
			// 		console.log('res')
			// 		this.commentsForm = res
			// 		// this.$forceUpdate()
			// 		this.show = true
			// 		this.btn = false
			// 	})	
			// },
			commentsFormid(id){
				this.show = true
				console.log(id)
				this.commentsForm.orderid = id
				this.btn = true
				
			},
			// 提交评论
			comments(){
				// this.commentsForm.orderid = this.id
				this.$u.post('/User/Order/Comments',this.commentsForm).then((res)=>{
					uni.showToast({
						title: res.msg
					})
					// this.orderView(this.id)
					this.show = false
					this.getOrderList(this.list[this.swiperCurrent].name, this.current)
					this.$forceUpdate()
				})
			},
			reachBottom() {
				// 此tab为空数据
				this.PageIndex += 1
				if (!this.noMore) {
					this.getOrderList(this.list[this.swiperCurrent].name, this.swiperCurrent).then((row) => {
						if (row.length == 0) {
							this.noMore = true
						}
					})
				}
			},
			// 页面数据
			getOrderList(state, index) {
				// if(!this.noMore){
				this.loadStatus.splice(this.swiperCurrent, 1, "loading")
				let stateArr = [0,1,2]
				switch (state){
					case '全部':
						stateArr = [0,1,2,3,4,5]
						break;
					case '服务中':
						stateArr = [0,1,2]
						break;
					case '点评':
						stateArr = [5]
						break;
					case '已取消':
						stateArr = [3]
						break;
					default:
						break;
				}
				
				// 参数
				let param = {
					"PageIndex": this.PageIndex,
					"PageSize": this.PageSize,
					"key": this.key,
					"state": stateArr,
					"order": [
					    {
					      "column": "createddatetime",
					      "isDesc": true
					    }
					],
					// "orderType": 1
				}
				if(state != '全部'){
					param.orderType = 1
				}
				if(state == '全部'){
					delete param.state
				}
				// // 判断是否为客户组
				// if(this.userdetail.lastloginenterpriseid > 0){
				// 	param.userType = 1
				// 	param.enterpriseId = this.userdetail.lastloginenterpriseid
				// }
				
				return this.$u.post('/User/Order/List',param).then((res) => {
					// this.orderList[idx]=res.rows;
					if (res.rows.length > 0) {
						res.rows.forEach((item) => {
							item.estimated.forEach((cell) => {
								cell.largetype.icon = this.fileURL + cell.largetype.icon
							})
							this.orderList[index].push(item)
						})
						if (res.rows.length < this.PageSize) {
							this.loadStatus.splice(this.swiperCurrent, 1, "nomore")
						} else {
							this.loadStatus.splice(this.swiperCurrent, 1, "loadmore")
						}
					} else {
						this.loadStatus.splice(this.swiperCurrent, 1, "nomore")
					}
					this.$forceUpdate()
					return res.rows
				})
				// }
			},
			// 总价
			totalPrice(item) {
				let price = 0;
				item.map(val => {
					price += parseFloat(val.price);
				});
				return price.toFixed(2);
			},
			// 总件数
			totalNum(item) {
				let num = 0;
				item.map(val => {
					num += val.number;
				});
				return num;
			},
			// tab栏切换
			change(index) {
				this.PageIndex = 1;
				
				this.orderList[index] = [];
				this.noMore = false;
				return this.getOrderList(this.list[index].name, index).then(()=>{
					this.swiperCurrent = index;
				})
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;

				if (current != this.current) { //滑动切换到其他分类时
					this.current = current;
					if (this.orderList[this.current].length == 0) {
						this.orderList[this.current] = []
						this.loadStatus.splice(this.current, 1, "loadmore")
						this.getOrderList(this.list[this.current].name, this.current)
					}
				} else {
					this.current = current;
				}
			},
			searchKeyword(val) {
				this.key = val
				this.PageIndex = 1;
				this.orderList[this.swiperCurrent] = [];
				this.getOrderList(this.list[this.swiperCurrent].name, this.swiperCurrent)
			}
		}
	};
</script>

<style scoped>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.comment-box{
		padding: 60rpx;
		width: 600rpx;
		.hd{
			border-bottom: 1px solid $u-border-color;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			font-size: 32rpx;
		}
		.u-flex{
			margin: 10rpx 0;
			.label{
				color: $u-content-color;
			}
		}
	}
	.page-box {
		// background-color: #f2f2f2;
	}
	.navbtn{
		font-size: 24rpx;
	}
	.order {
		// width: 710rpx;
		// background-color: #ffffff;
		// margin: 20rpx auto;
		// border-radius: 20rpx;
		// box-sizing: border-box;
		// padding: 20rpx;
		// font-size: 28rpx;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					display: flex;
					align-items: center;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;
			justify-content: space-between;

			.left {
				margin-right: 20rpx;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
					font-weight: bold;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
				color: $u-color-orange;
			}
		}

		.time {
			font-size: 24rpx;
			margin: 20rpx 0;
			line-height: 40rpx;
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			justify-content: space-between;
			align-items: center;
			.more{
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}
			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
	
	// 按钮栏
	.navigation {
		// position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 99999;
		// background-color: white;
		display: flex;
		margin-top: 20rpx;
		// border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		justify-content: flex-end;
		
		// padding: 16rpx 0;
		.con {
			display: flex;
			font-size: 28rpx;
			align-items: center;
			justify-content: space-around;
			// padding-left: 10rpx;
			// padding-right: 10rpx;
			// padding-top: 20rpx;
			// padding-bottom: env(safe-area-inset-bottom);
			.navbtn{
				// margin: 0 10rpx;
			}
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
				margin: 16rpx 0;
			}
			.cancel {
				margin-right: 30rpx;
				color: $u-tips-color;
			}
			.buy {
				background-color: #ff7900;
			}
		}
	}
</style>
